<div class="slidershow">
  <div class="picture-list"
       *ngFor="let image of images; let i = index; let f = first "
        [ngStyle]="{display: currentImgIndex === i ? 'block' : 'none'}">
    <img src="{{image.path}} " />
  </div>
  <div class="slider-thumb thumbimg">
    <a (click)="prevPage()" class="previcon icon iconthumb" [ngClass]="{'cursor':isFirst}">
      <i class="iconfont">&#xe699;</i>
    </a>
    <ul class="grid grid-width-1-5 grid-collapse">
      <li
        *ngFor="let image of images let i = index; let f = first; let l = last"
        [ngClass]="{'active': i >= currentIndex -4 && i<= currentIndex, 'highlight': currentImgIndex === i}"
        class="" (mouseenter)="go(i)"
        (click)="go(i)">
        <img src="{{image.path}}" />
      </li>
    </ul>
    <a (click)="nextPage()" class="nexticon icon iconthumb" [ngClass]="{'cursor':isLast}">
      <i class="iconfont">&#xe61e;</i>
    </a>
  </div>
</div>
